<template>
  <div class="container">
    <div class="log">欢迎注册!</div>
    <div class="register">
      <el-tabs
        tab-position="top"
        style="width: 800px; margin: 0 auto"
        v-model="activeName"
        @tab-click="tabChange"
      >
        <el-tab-pane label="第一步" name="1" :disabled="isDisable1">
          <p>账号信息</p>
          <account-basic :form="form" ref="accountBasic"/>
          <el-tooltip effect="dark" content="下一步" placement="top">
            <el-button
              class="next"
              circle
              icon="el-icon-right"
              @click="switchForward"
            />
          </el-tooltip>
        </el-tab-pane>

        <el-tab-pane label="第二步" name="2" :disabled="isDisable2">
          <p>公司信息</p>
          <company-info :form="form" ref="companyInfo" />
          <el-row>
            <el-tooltip effect="dark" content="上一步" placement="top">
              <el-button
                class="next"
                circle
                icon="el-icon-back"
                @click="switchBack"
              />
            </el-tooltip>
            <el-tooltip effect="dark" content="下一步" placement="top">
              <el-button
                class="next"
                circle
                icon="el-icon-right"
                @click="switchForward"
              />
            </el-tooltip>
          </el-row>
        </el-tab-pane>

        <el-tab-pane label="第三步" name="3" :disabled="isDisable3">
          <p>相关证照</p>
          <strong class="strong">请把以下证照打包发送到xxxx@xxx邮箱</strong>
          <div class="content">
            <ol>
              <li>营业执照</li>
              <li>一般纳税人证明</li>
              <li>银行开户证许可</li>
              <li>IOS证书</li>
              <li>行业/专业证照</li>
              <li>其他公司证照</li>
            </ol>
          </div>
          <div class="checkdiv">
            <el-checkbox v-model="check">我已阅读</el-checkbox>
            <el-row>
              <el-tooltip effect="dark" content="上一步" placement="top">
                <el-button
                  class="next"
                  circle
                  icon="el-icon-back"
                  @click="switchBack"
                />
              </el-tooltip>
              <el-tooltip effect="dark" content="下一步" placement="top">
                <el-button
                  class="next"
                  circle
                  icon="el-icon-right"
                  @click="switchForward"
                />
              </el-tooltip>
            </el-row>
          </div>
        </el-tab-pane>

        <el-tab-pane label="第四步" name="4" :disabled="isDisable4">
          <p>其他信息</p>
          <other-info
            :other-products="form.products"
            :other-contacts="form.contacts"
            :other-customers="form.customers"
            @register="register"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import accountBasic from "./components/accountBasic.vue";
import companyInfo from "./components/companyInfo.vue";
import otherInfo from "./components/otherInfo.vue";
import { supplierRegister } from "@/api/register";
export default {
  name: "Register",
  components: { accountBasic, companyInfo, otherInfo },
  data() {
    return {
      form: {
        companyInfo: {
          companyAddress: "",
          companyEmail: "",
          companyFax: "",
          companyName: "",
          companyPhone: "",
          companyWebsite: "",
          corporateRepresentative: "",
          identityCard: "",
        },
        contacts: [],
        customers: [],
        email: "",
        mobilePhone: "",
        password: "",
        rePassword: "", // 重复密码
        products: [],
        username: "",
      },
      activeName: "1",
      isDisable1: false,
      isDisable2: true,
      isDisable3: true,
      isDisable4: true,
      check: false,
    };
  },
  methods: {
    tabChange(tab, event) {
      console.log(tab.name);
      switch (tab.name) {
        case "1":
          this.isDisable2 = true;
          this.isDisable3 = true;
          this.isDisable4 = true;
          break;
        case "2":
          this.isDisable3 = true;
          this.isDisable4 = true;
          break;
        case "3":
          this.isDisable4 = true;
          break;
      }
    },
    switchBack() {
      if (this.activeName !== "1")
        this.activeName = parseInt(this.activeName) - 1 + "";
    },
    switchForward() {
      if (this.activeName !== "4") {
        const isContinue = this.formDataCheck(this.activeName);
        if (!isContinue) return;
        this.activeName = parseInt(this.activeName) + 1 + "";
      }
    },

    formDataCheck(val) {
      let isContinue = true;
      let flag = false;
      switch (val) {
        case "1":
          flag = this.$refs["accountBasic"].validateForm();
          if (flag) {
            console.log(this.form);
            this.isDisable2 = false;
          } else {
            this.$message.error("保全信息不完整，请继续填写完整");
            isContinue = false;
            this.isDisable2 = true;
            this.isDisable3 = true;
            this.isDisable4 = true;
          }
          break;
        case "2":
          flag = this.$refs["companyInfo"].validateForm();
          if (flag) {
            console.log(this.form);
            this.isDisable3 = false;
          } else {
            this.$message.error("保全信息不完整，请继续填写完整");
            isContinue = false;
            this.isDisable3 = true;
            this.isDisable4 = true;
          }
          break;
        case "3":
          if (!this.check) {
            this.$message.error("请仔细阅读事项并确认！");
            isContinue = false;
            this.isDisable4 = true;
          } else {
            this.isDisable4 = false;
          }
          break;
        case "4":
          break;
      }
      return isContinue;
    },

    register() {
      console.log(this.form);
      supplierRegister(this.form).then((res) => {
        if (res.code === 200) {
          this.$message.success("注册成功！");
          this.$router.replace("/login");
        }
      });
      // if (response.code === 200) {
      //   this.editDialogVisible = false;
      //   this.getData();
      //   this.index = 0;
      // }
    },
  },
};
</script>

<style scoped>
.el-tabs /deep/ .el-tabs__item {
  width: 200px;
  text-align: center;
}

.el-tabs /deep/ .el-tabs__content {
  width: 800px;
  /* height: 550px; */
  margin: 0 auto;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.04);
}
p {
  text-align: center;
  font-size: 25px;
  margin-bottom: 50px;
}
.log {
  width: 100%;
  height: 80px;
  line-height: 80px;
  /* background: yellow; */
  text-align: center;
  font-size: 30px;
}

.container {
  margin: 0;
  padding: 0;
  min-height: 100%;
  width: 100%;
  background: linear-gradient(to right, #fbc2ed, #a6c1ee);
}
.next {
  color: #ffffff;
  background-color: #1890ff;
  border-color: #1890ff;
  display: block;
  margin: 40px auto;
}
.strong {
  display: block;
  width: 500px;
  margin: 0 auto;
  font-size: 25px;
  font-weight: 400;
}
.checkdiv {
  width: 500px;
  margin: 0 auto;
  font-size: 30px;
}
.el-descriptions {
  padding: 0 10px;
}
.el-descriptions-item__label {
  width: 88px;
  line-height: 36px;
  text-align: center;
}
.el-input--mediumm {
  width: 160px;
}
.el-row {
  display: flex;
  justify-content: space-around;
}
.skip-finsh {
  width: 160px;
  margin: 20px 0;
}

.content {
  border: 1px solid;
  border-radius: 2px;
  margin: 0 auto;
  width: 500px;
  height: 300px;
}
.content > ol li {
  height: 30px;
  font-size: 20px;
  line-height: 30px;
  margin: 10px 0;
}
.el-form {
  width: 500px;
  margin: 0 auto;
}
</style>